Theme

thm <- hc_theme(
      colors = c("#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", 
"#e4d354", "#2b908f", "#f45b5b", "#91e8e1"), chart = list(
      backgroundColor = "var(--page-background)"
    ), xAxis = list(
      labels = list(style = list(color = "var(--text-color)")),
      gridLineDashStyle = "Dash",
      gridLineWidth = 1, gridLineColor = "var(--code-block-background)", lineColor = "var(--text-color)",
      minorGridLineColor = "var(--text-color)", tickColor = "var(--text-color)", tickWidth = 1,
      title = list(style = list(color = "var(--text-color)"))
    ), yAxis = list(
      labels = list(style = list(color = "var(--text-color)")),
      gridLineDashStyle = "Dash",
      gridLineWidth = 1, gridLineColor = "var(--code-block-background)", lineColor = "var(--text-color)",
      minorGridLineColor = "var(--text-color)", tickColor = "var(--text-color)", tickWidth = 1,
      title = list(style = list(color = "var(--text-color)"))    
      ), legendBackgroundColor = "var(--page-background)",
    background2 = "var(--page-background)", dataLabelsColor = "var(--text-color)", textColor = "var(--text-color)",
    contrastTextColor = "var(--text-color)", maskColor = "rgba(255,255,255,0.3)",
    title = list(style = list(color = "var(--text-color)")), subtitle = list(
      style = list(color = "var(--text-color)")
    ), legend = list(
      itemStyle = list(
        color = "var(--text-color)"
      ), itemHoverStyle = list(color = "var(--text-color)"),
      itemHiddenStyle = list(color = "var(--text-color)")
    )

)

thm <- hc_theme_merge(
  hc_theme_darkunica(),
  thm
)

options(highcharter.theme = thm)


highcharter::highcharts_demo()

Line Charts

data(economics_long, package = "ggplot2")

economics_long2 <- dplyr::filter(economics_long, variable %in% c("pop", "uempmed", "unemploy"))

hchart(economics_long2, "line", hcaes(x = date, y = value01, group = variable))

library(dplyr)

set.seed(123); n <- 200; colors <- sample(viridisLite::cividis(5, end = .9))

df <- tibble(
  x = 1:n,
  y = abs(arima.sim(n = n, model = list(ar = c(0.9)))) + 2,
  y2 = 10 + y,
  col = rep(colors, each = n/10, length.out = n)
)

hchart(df, "coloredarea", hcaes(x, y, segmentColor = col)) %>% 
   hc_add_series(df, "coloredline", hcaes(x, y2 , segmentColor = col)) %>% 
   hc_add_dependency("plugins/multicolor_series.js")

Scatter and Model Confidence Interval

library(broom)

modlss <- loess(dist ~ speed, data = cars)

fit <- arrange(augment(modlss), speed) %>% 
  mutate(.se = predict(modlss, se = TRUE)$se.fit)

head(fit)

## # A tibble: 6 × 5
##    dist speed .fitted .resid   .se
##   <dbl> <dbl>   <dbl>  <dbl> <dbl>
## 1     2     4    5.89 -3.89   9.89
## 2    10     4    5.89  4.11   9.89
## 3     4     7   12.5  -8.50   4.99
## 4    22     7   12.5   9.50   4.99
## 5    16     8   15.3   0.719  4.55
## 6    10     9   18.4  -8.45   4.31

hc <- hchart(
  cars,
  type = "scatter",
  hcaes(x = speed, y = dist),
  name = "Speed and Stopping Distances of Cars",
  showInLegend = TRUE
  )


qtint <- qt(0.975, predict(modlss, se = TRUE)$df)

hc %>%
  hc_add_series(
    fit,
    type = "spline",
    hcaes(x = speed, y = .fitted),
    name = "Fit",
    id = "fit", ## this is for link the arearange series to this one and have one legend
    lineWidth = 1,
    showInLegend = TRUE
    ) %>% 
  hc_add_series(
    fit,
    type = "arearange",
    name = "SE",
    hcaes(x = speed, low = .fitted - qtint*.se, high = .fitted + qtint*.se),
    linkedTo = "fit", ## here we link the legends in one.
    showInLegend = FALSE,
    color = hex_to_rgba("gray", 0.2),  ## put a semi transparent color
    zIndex = -3 ## this is for put the series in a back so the points are showed first
    )

data(favorite_bars)
data(favorite_pies)

highchart() %>%
  ## Data
  hc_add_series(
    favorite_pies,
    "column", hcaes(
      x = pie, y = percent
    ),
    name = "Pie"
  ) %>%
  hc_add_series(
    favorite_bars, "pie", hcaes(
      name = bar, y = percent
    ),
    name = "Bars"
  ) %>%
  ## Options for each type of series
  hc_plotOptions(
    series = list(
      showInLegend = FALSE, pointFormat = "{point.y}%", colorByPoint = TRUE
    ), pie = list(
      center = c("30%", "10%"), size = 120, dataLabels = list(enabled = FALSE)
    )
  ) %>%
  ## Axis
  hc_yAxis(
    title = list(text = "percentage of tastiness"), labels = list(format = "{value}%"),
    max = 100
  ) %>%
  hc_xAxis(
    categories = favorite_pies$pie
  ) %>%
  ## Titles, subtitle, caption and credits
  hc_title(
    text = "How I Met Your Mother: Pie Chart Bar Graph"
  ) %>%
  hc_subtitle(
    text = "This is a bar graph describing my favorite pies
    including a pie chart describing my favorite bars"
  ) %>%
  hc_caption(
    text = "The values represented are in percentage of tastiness and awesomeness."
  ) %>%
  hc_credits(
    enabled = TRUE, text = "Source: HIMYM", href = "https://www.youtube.com/watch?v=f_J8QU1m0Ng", style = list(fontSize = "12px")
  ) %>%
  hc_size(
    height = 600
  )

arcdiagram

Arc diagram series is a chart drawing style in which the vertices of the chart are positioned along a line on the Euclidean plane and the edges are drawn as a semicircle in one of the two half-planes delimited by the line, or as smooth curves formed by sequences of semicircles.

tibble(from = sample(letters),to = sample(letters[1:10],26,replace = TRUE),weight = sample(1:5,26,replace = TRUE)) %>%
  rowid_to_column() %>% 
  split(.$rowid) %>% 
  map(~{
    
    tibble(from = .x$from, to = .x$to, weight = .x$weight)
  }) %>% 
  highcharter::list_parse2() -> arc_data

tibble(from = sample(letters),to = sample(letters[1:10],26,replace = TRUE),weight = sample(1:5,26,replace = TRUE)) -> arc_data 
arc_data %>% 
  rowid_to_column() %>% 
  split(.$rowid) %>% 
  map(~{
    list(.x$from,.x$to,.x$weight)
  }) -> arc_data

# arc_data %>% 
#   list_parse() %>% jsonlite::toJSON(pretty = TRUE)



hchart(arc_data,"arcdiagram",hcaes(from = from,to = to,weight = weight)) %>% 
  hc_add_dependency("modules/arc-diagram.js")


highchart() %>%
  hc_add_series(
# series = list(
      data = unname(arc_data) %>% jsonlite::toJSON(auto_unbox = TRUE),
      keys = c("from", "to", "weight"),
      type = "arcdiagram",
      name = "Train connections",
      linkWeight = 1,
      centeredLinks = TRUE,
      dataLabels = list(
        rotation = 90,
        y = 30,
        align = "left",
        color = "black"
      ),
      offset = "65%"

    # )
  ) %>%
  hc_add_dependency("modules/arc-diagram.js")
# hc_add_dep

area

The area series type.

economics_long %>% 
  hchart("area",hcaes(date,value01,group = variable))

arearange

The area range series is a carteseian series with higher and lower values foreach point along an X axis, where the area between the values is shaded.

jsonlite::fromJSON("https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/range.json") -> area_range_data

highchart() %>% 
  hc_add_series(data = as_tibble(area_range_data) %>% list_parse2(),type = "arearange") %>% 
  hc_xAxis(
    type = "datetime"
  ) %>% 
  hc_title(
    text = "Temperature variation by day"
  )

areaspline

The area spline series is an area series where the graph between thepoints is smoothed into a spline.

moose_and_deer <- tibble(
  year = c(2000:2020),
  Moose = c(
    38000, 37300, 37892, 38564, 36770, 36026, 34978, 35657, 35620, 35971, 36409, 36435, 34643, 34956, 33199, 31136, 30835, 31611, 30666, 30319, 31766
  ), Deer = c(
    22534, 23599, 24533, 25195, 25896, 27635, 29173, 32646, 35686, 37709, 39143, 36829, 35031, 36202, 35140, 33718, 37773, 42556, 43820, 46445, 50048
  )
) %>% 
  gather(key,value,-year)



hchart(moose_and_deer,"areaspline",hcaes(x = year,y = value,group = key )) %>% 
  hc_legend(
    layout = "vertical",
    align = "left", verticalAlign = "top",
    x = 120, y = 70, floating  = TRUE,
    backgroundColor = "var(--accent-color)",
    labels = list(style = list(color = "var(--page-background)"))
  ) %>% 
  hc_title(text = "Moose and deer hunting in Norway 2000-2021") %>%
  hc_subtitle(text="Source:SSB")

bar

A bar series is a special type of column series where the columns arehorizontal.

palmerpenguins::penguins %>%
  group_by(species) %>%
  summarize(flipper_length = mean(flipper_length_mm, na.rm = TRUE)) %>% 
  hchart("bar",hcaes(species,flipper_length,color = I(viridis::viridis(3)))) %>%
  hc_title(text = "Average Flipper Length by Penguin Species") 

bellcurve

A bell curve is an areaspline series which represents the probabilitydensity function of the normal distribution. It calculates mean andstandard deviation of the base series data and plots the curve accordingto the calculated parameters.

boxplot

A box plot is a convenient way of depicting groups of data through theirfive-number summaries: the smallest observation (sample minimum), lowerquartile (Q1), median (Q2), upper quartile (Q3), and largest observation(sample maximum).

# hchart()

c(3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4,
    4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
    3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
    3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
    2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
    2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
    2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6,
    3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2,
    2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7,
    3.2, 3.3, 3, 2.5, 3, 3.4, 3) %>% 
  {
    dat <- .
    highchart() %>% 
      hc_add_series(data = dat,type = "bellcurve")%>% 
     hc_add_dependency("modules/histogram-bellcurve.js")
  } 

 ## %>% 
 ##  hchart("boxplot",hcaes(x = group,y = n, group = group))

bubble

structure(list(x = c(95, 86.5, 80.8, 80.4, 80.3, 78.4, 74.2, 
73.5, 71, 69.2, 68.6, 65.5, 65.4, 63.4, 64), y = c(95, 102.9, 
91.5, 102.5, 86.1, 70.1, 68.5, 83.1, 93.2, 57.6, 20, 126.4, 50.8, 
51.8, 82.9), z = c(13.8, 14.7, 15.8, 12, 11.8, 16.6, 14.5, 10, 
24.7, 10.4, 16, 35.3, 28.5, 15.4, 31.3), name = c("BE", "DE", 
"FI", "NL", "SE", "ES", "FR", "NO", "UK", "IT", "RU", "US", "HU", 
"PT", "NZ"), country = c("Belgium", "Germany", "Finland", "Netherlands", 
"Sweden", "Spain", "France", "Norway", "United Kingdom", "Italy", 
"Russia", "United States", "Hungary", "Portugal", "New Zealand"
)), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, 
-15L)) -> sugar_and_fat


sugar_and_fat %>%
  hchart(., "bubble", hcaes(x = x, y = y, z = z)) %>% 
  hc_plotOptions(
    series = list(
      dataLabels = list(enabled = TRUE, format = "{point.name}")
    )
  ) %>% 
  hc_tooltip(
    headerFormat = "<table>",
    pointFormat = paste(
      '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>',
      "<tr><th>Fat intake:</th><td>{point.x}g</td></tr>",
      "<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>",
      "<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>"
    ),
    footerFormat = "</table>",
    useHTML = TRUE
  ) %>% 
  hc_xAxis(
    plotLines = list(list(color = "var(--text-color)",dashStyle = "dot",value = 65,
                          label = list(text = "Safe fat intake 65g/day",style = list(color = "var(--text-color)"),rotation = 0)))
  ) %>%
  hc_yAxis(
    plotLines = list(list(color = "var(--text-color)",dashStyle = "dot",value = 50,
                          label = list(text = "Safe sugar intake 50g/day",style = list(color = "var(--text-color)"),rotation = 0,align = "right")))
  ) %>% 
  hc_title(
    text = "Sugar and fat intake per country"
  ) %>% 
  hc_subtitle(
    text = "Source: Euromonitor and OECD"
  )

A bubble series is a three dimensional series type where each pointrenders an X, Y and Z value. Each points is drawn as a bubble where theposition along the X and Y axes mark the X and Y values, and the size ofthe bubble relates to the Z value.

bullet

df <- data.frame(
  y = sample(5:10),
  target = sample(5:10),
  x = LETTERS[1:6]
  )

hchart(df, "bullet", hcaes(x = x, y = y, target = target), color = "black") %>%
  hc_chart(inverted = TRUE) %>%
  hc_yAxis(
    min = 0,
    max = 10,
    gridLineWidth = 0,
    plotBands = list(
      list(from = 0, to = 7, color = "#666"),
      list(from = 7, to = 9, color = "#999"),
      list(from = 9, to = 10, color = "#bbb")
    )
  ) %>%
  hc_xAxis(
    gridLineWidth = 15,
    gridLineColor = "white"
  ) %>% 
  hc_plotOptions(
    series = list(
      pointPadding = 0.25,
      pointWidth = 15,
      borderWidth = 0,
      targetOptions = list(width = '200%')
      )
    )

A bullet graph is a variation of a bar graph. The bullet graph featuresa single measure, compares it to a target, and displays it in the contextof qualitative ranges of performance that could be set usingplotBands on yAxis.

column

Column series display one column per value along an X axis.

columnpyramid

Column pyramid series display one pyramid per value along an X axis.To display horizontal pyramids, set chart.inverted totrue.

columnrange

The column range is a cartesian series type with higher and lowerY values along an X axis. To display horizontal bars, setchart.inverted to true.

cylinder

A cylinder graph is a variation of a 3d column graph. The cylinder graphfeatures cylindrical points.

dependencywheel

A dependency wheel chart is a type of flow diagram, where all nodes arelaid out in a circle, and the flow between the are drawn as link bands.

dumbbell

The dumbbell series is a cartesian series with higher and lower valuesfor each point along an X axis, connected with a line between thevalues.

dumbbell

Requires highcharts-more.js and modules/dumbbell.js.

errorbar

Error bars are a graphical representation of the variability of data andare used on graphs to indicate the error, or uncertainty in a reportedmeasurement.

funnel

Funnel charts are a type of chart often used to visualize stages in asales project, where the top are the initial stages with the mostclients. It requires that the modules/funnel.js file is loaded.

funnel3d

A funnel3d is a 3d version of funnel series type. Funnel charts area type of chart often used to visualize stages in a sales project,where the top are the initial stages with the most clients.

funnel3d

It requires that the highcharts-3d.js, cylinder.js andfunnel3d.js module are loaded.

gauge

Gauges are circular plots displaying one or more values with a dialpointing to values along the perimeter.

heatmap

A heatmap is a graphical representation of data where the individualvalues contained in a matrix are represented as colors.

heatmap

Requires modules/heatmap.

histogram

A histogram is a column series which represents the distribution of thedata set in the base series. Histogram splits data into bins and showstheir frequencies.

item

An item chart is an infographic chart where a number of items are laidout in either a rectangular or circular pattern. It can be used tovisualize counts within a group, or for the circular pattern, typicallya parliament.

item

The circular layout has much in common with a pie chart. Many of the itemseries options, like center, size and data label positioning, areinherited from the pie series and don’t apply for rectangular layouts.

line

A line series displays information as a series of data points connected bystraight line segments.

lollipop

The lollipop series is a carteseian series with a line anchored fromthe x axis and a dot at the end to mark the value.Requires highcharts-more.js, modules/dumbbell.js andmodules/lollipop.js.

networkgraph

A networkgraph is a type of relationship chart, where connnections(links) attracts nodes (points) and other nodes repulse each other.

organization

An organization chart is a diagram that shows the structure of anorganization and the relationships and relative ranks of its parts andpositions.

tibble(from = sample(letters[1:3],10,replace = TRUE),to = sample(letters[1:10],10),weight = 1:10,id = 0:9) %>% 
  hchart("organization") %>%
  hc_chart(inverted = TRUE)

packedbubble

A packed bubble series is a two dimensional series type, where each pointrenders a value in X, Y position. Each point is drawn as a bubblewhere the bubbles don’t overlap with each other and the radiusof the bubble relates to the value.

gapminder::gapminder %>%
  filter(year == max(year)) %>%
  hchart("packedbubble", hcaes(name = country, value = pop, z = pop, group = continent), dataLabels = list(enabled = TRUE, format = "{point.country}", filter = list(property = "y", operator = ">", value = 31210042))) %>%
  hc_plotOptions(
    packedbubble = list(
      minSize = "30%", maxSize = "150%"
    )
  )

hc <- gapminder::gapminder %>% 
  filter(year == max(year)) %>% 
  select(country, pop, continent) %>% hchart("packedbubble", hcaes(name = country, value = pop, group = continent))

q95 <- as.numeric(quantile(gapminder::gapminder$pop, .95))

hc %>% 
  hc_tooltip(
    useHTML = TRUE,
    pointFormat = "<b>{point.name}:</b> {point.value}"
  ) %>% 
  hc_plotOptions(
    packedbubble = list(
      maxSize = "150%",
      zMin = 0,
      layoutAlgorithm = list(
        gravitationalConstant =  0.05,
        splitSeries =  TRUE, ## TRUE to group points
        seriesInteraction = TRUE,
        dragBetweenSeries = TRUE,
        parentNodeLimit = TRUE
      ),
      dataLabels = list(
        enabled = TRUE,
        format = "{point.name}",
        filter = list(
          property = "y",
          operator = ">",
          value = q95
        ),
        style = list(
          color = "black",
          textOutline = "none",
          fontWeight = "normal"
        )
      )
    )
  )  

pareto

A pareto diagram is a type of chart that contains both bars and a linegraph, where individual values are represented in descending order bybars, and the cumulative total is represented by the line.

pie

library(scales)

diamond_data <- count(diamonds, clarity)
diamond_data <- mutate(diamond_data, porcentaje = percent(n/sum(n)))


hchart(
  diamond_data, "pie", hcaes(name = clarity, y = n),
  name = "Corte",
  innerSize = "80%",
  dataLabels = list(format = "{point.name}<br>({point.porcentaje})")
  ) -> hc
hc

hc%>% 
  hc_tooltip(
    useHTML = TRUE,
    style = list(fontSize = "30px"),
    headerFormat = "",
    pointFormat = "<div style='text-align: center;'> <b>{point.name}</b><br>{point.y} <br>{point.porcentaje} </div>",
    positioner = JS(
      "function () {
      
        /* one of the most important parts! */
        xp =  this.chart.chartWidth/2 - this.label.width/2
        yp =  this.chart.chartHeight/2 - this.label.height/2
      
        return { x: xp, y: yp };
      
      }"),
    shadow = FALSE,
    borderWidth = 0,
    backgroundColor = "transparent",
    hideDelay = 1000
    )

A pie chart is a circular graphic which is divided into slices toillustrate numerical proportion.

polygon

A polygon series can be used to draw any freeform shape in the cartesiancoordinate system. A fill is applied with the color option, andstroke is applied through lineWidth and lineColor options.

pyramid

A pyramid series is a special type of funnel, without neck and reversedby default.

pyramid3d

A pyramid3d is a 3d version of pyramid series type. Pyramid charts area type of chart often used to visualize stages in a sales project,where the top are the initial stages with the most clients.

sankey

A sankey diagram is a type of flow diagram, in which the width of thelink between two nodes is shown proportionally to the flow quantity.

data(diamonds, package = "ggplot2")
diamonds2 <- select(diamonds, cut, color, clarity)
data_to_sankey(diamonds2)

## # A tibble: 91 × 4
##    from  to    weight id   
##    <chr> <chr>  <int> <chr>
##  1 Fair  D        163 FairD
##  2 Fair  E        224 FairE
##  3 Fair  F        312 FairF
##  4 Fair  G        314 FairG
##  5 Fair  H        303 FairH
##  6 Fair  I        175 FairI
##  7 Fair  J        119 FairJ
##  8 Good  D        662 GoodD
##  9 Good  E        933 GoodE
## 10 Good  F        909 GoodF
## # … with 81 more rows

hchart(data_to_sankey(diamonds2), "sankey", name = "diamonds")

scatter

A scatter plot uses cartesian coordinates to display values for twovariables for a set of data.

scatter3d

A 3D scatter plot uses x, y and z coordinates to display values for threevariables for a set of data.

solidgauge

A solid gauge is a circular gauge where the value is indicated by a filledarc, and the color of the arc may variate with the value.

spline

A spline series is a special type of line series, where the segmentsbetween the data points are smoothed.

streamgraph

A streamgraph is a type of stacked area graph which is displaced around acentral axis, resulting in a flowing, organic shape.

sunburst

A Sunburst displays hierarchical data, where a level in the hierarchy isrepresented by a circle. The center represents the root node of the tree.The visualization bears a resemblance to both treemap and pie charts.